<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<div>
  <h2><span openlmis-message="label.vaccine.report.init.title"></span></h2>
  <div ng-show="programs.length > 1">
    <div class="row-fluid">
      <div class="span12">
        <label openlmis-message="label.program"></label>
      </div>
    </div>
    <div class="row-fluid">
      <select ui-select2
              id="programListMyFacility" class="span3"
            ng-model="filter.program"   ng-change="onProgramChanged()">
        <option value="{{program.id}}" ng-repeat="program in programs">{{program.name}}</option>
      </select>
    </div>
  </div>
  <div ng-show="programs.length == 1">
    <div class="info-box">
      <strong><span openlmis-message="label.program"></span>:</strong>
      <span ng-bind="programs[0].name"></span>
      <div class="padding2px"></div>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span12">
      <label openlmis-message="label.facility"></label>
    </div>
  </div>
  <div class="row-fluid">
    <select ui-select2
            id="facility" class="span3"
           ng-model="filter.facility"  ng-change="onFacilityChanged()">
      <option value="{{facility.id}}" ng-repeat="facility in facilities">{{facility.name}}</option>

    </select>
  </div>

  <div class="row-fluid" ng-show="filter.facility">
    <div class="row-fluid init-rnr-grid">
      <div class="span6">
        <div class="gridStyle small" ng-grid="periodGridOptions"
             ng-show="!(periodGridData.length == 0)"></div>
        <div
             ng-show="periodGridData == undefined || periodGridData.length == 0">
          <span openlmis-message="label.vaccine.no.pending.periods"></span>
        </div>
      </div>
    </div>
  </div>


  <div class="row-fluid" ng-show="error">
    <div class="span12">
      <div class="alert alert-error" id="saveSuccessMsgDiv"
           openlmis-message="error" ng-show="error"></div>
    </div>
  </div>

</div>